<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../publics/jstl.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="${ctx}/resource/static/css/common.css?v=4" rel="stylesheet">
  <title>订单信息</title>
  <script>
     var jsCtx = '${ctx}';
  </script>
</head>
<body style="padding-bottom: 50px; height: auto;">

    <!-- 提交信息 -->
    <input id="startCityId" value="${startCityId}" type="hidden" />
    <input id="startCityName" value="${startCityName}" type="hidden" />
    <input id="startShopId" value="${startShopId}" type="hidden" />
    <input id="startShopName" value="${startShopName}" type="hidden" />
    <input id="startDate" value="${startDate}" type="hidden" />
    <input id="endCityId" value="${endCityId}" type="hidden" />
    <input id="endCityName" value="${endCityName}" type="hidden" />
    <input id="endShopId" value="${endShopId}" type="hidden" />
    <input id="endShopName" value="${endShopName}" type="hidden" />
    <input id="endDate" value="${endDate}" type="hidden" />
    <input id="carId" value="${carId}" type="hidden" />
    <input id="carName" value="${carName}" type="hidden" />
    <input id="carDescription" value="${carDescription}" type="hidden" />
    <input id="days" value="${days}" type="hidden" />
    <input id="price" value="${dayPrice}" type="hidden" />
    <input id="total" value="${total}" type="hidden" />
    <input id="total2" value="${total}" type="hidden" />
    <input id="totalSnapshot" value="${totalSnapshot}" type="hidden" />
    <input id="bx1" value="0" type="hidden" />
    <input id="bx2" value="0" type="hidden" />

  <div class="order">
    <div class="order-hd">
        <div id="car-view" class="car-info text-center">
          <div class="car-info-name">${carName}</div>
          <div class="car-info-cover">
            <img src="${picUrl}" width="240">
          </div>
          <div class="car-info-link">
          <c:if test='${car.viewUrl != null && !"".equals(car.viewUrl)}'>
              <a href="${car.viewUrl}"><i class="iconfont icon-search3"></i>查看车辆详情</a>
          </c:if>
          </div>
          <div class="car-info-type">
            <%--<span><i class="iconfont icon-wancheng"></i> 自动1.6L</span>--%>
            <%--<span><i class="iconfont icon-wancheng"></i> 三厢</span>--%>
            <%--<span><i class="iconfont icon-wancheng"></i> 5座</span>--%>
            ${carDescription}
          </div>
        </div>   
        <div class="car-info-verder">
          <div>
            <%--<span>来自于</span>上汽通用--%>
          </div>
        </div>
        <div class="order-stores flex">
          <div class="order-store flex-3-1">
            <label>取车时间</label>
            <div class="date-picker">
              <div class="date-picker-text">${startDate2}<span>${startTime}</span></div>
            </div>
          </div>
          <div class="order-duration flex-3-1">
            <p>
              <span>${days}天</span>
            </p>
          </div>
          <div class="order-store flex-3-1 text-right">
            <label>还车时间</label>
            <div class="date-picker">
              <div class="date-picker-text">${endDate2}<span>${endTime}</span></div>
            </div>
          </div>
        </div>
        <div class="order-shops flex">
          <div class="order-shop text-ellipse flex-1"><i class="iconfont icon-wxbmingxingdianpu"></i><span>${startShopName}</span></div>
          <div class="order-shop text-ellipse flex-1"><i class="iconfont icon-wxbmingxingdianpu"></i><span>${endShopName}</span></div>
        </div>
    </div>
    <div class="order-bd">
        <div class="order-info-group">
          <div class="order-info-item flex" style="margin-right: 20px;">
            <div class="flex-auto">优惠券</div>
            <label class="flex-auto text-right">
              <select id="coupon" style="-webkit-appearance: none; border: none; background-color: white;">
                  <option value="0">请选择优惠券</option>
                  <c:forEach items="${couponList}" var="coupon">
                      <option value="${coupon.couponGuid}"
                              data-guid="${coupon.guid}"
                              data-subcount="1"
                              data-couponvalue="${coupon.couponValue}"
                              data-typename="${coupon.typeName}">${coupon.title}</option>
                  </c:forEach>
              </select>
            </label>
            <div class="price-option-arrow flex-none iconfont icon-gengduo" style="margin-top: 2px;"></div>
          </div>
        </div>
        <div class="order-info-group">
            <div class="order-info-item flex" style="margin-right: 20px;">
                <div class="flex-auto">支付方式</div>
                <label class="flex-auto text-right">
                    <select id="payType" style="-webkit-appearance: none; border: none; background-color: white;">
                        <option value="0">微信支付</option>
                        <option value="1">储值支付</option>
                    </select>
                </label>
                <div class="price-option-arrow flex-none iconfont icon-gengduo" style="margin-top: 2px;"></div>
            </div>
        </div>
        <div class="order-info-tip">
          <div>温馨提示</div>
          <div>1.首次租车请使用<span>本人信用卡,本人二代有效身份证,本人有效地方驾驶证正副本</span></div>
          <div>2.本订单仅为客户租车预约登记，提交该订单后，客户需要到门店办理具体租车手续，具体权利义务以签署的合同为准</div>
          <div>3.为了您更好的用车请点击查看<a class="show-book-rule" href="javascript:void(0);">退改规则</a></div>
        </div>            
    </div>
    <div class="order-extra">
      <div class="h2"><div>增值服务<a href="javascript:void(0);">详细说明</a></div></div>
      <div class="order-extra-item">
        <div class="order-extra-hd  order-extra-must disabled" data-price="0" data-title="基本保险（保额50万）"><i class="iconfont icon-wancheng"></i>基本保险（保额50万）<span class="pull-right">￥${insurance}/天</span></div>
        <div class="order-extra-bd">保险车辆因意外事故，致使他人遭受人身伤亡或财产的直接损失，50万元以内保险公司核定理赔的100%。</div>
      </div>
      <div class="order-extra-item order-extra-maybe">
        <div class="order-extra-hd" data-id="1" data-price="50" data-total="${50 * days}" data-days="${days}" data-title="车上人员责任"><i class="iconfont icon-circle"></i>车上人员责任（自选）<span class="pull-right">￥50/天</span></div>
        <div class="order-extra-bd">如在租赁期间内购买车上人员责任（10万/位*5位），保险车辆发生事故，致使车上人员遭受人身伤亡为保险费用损失。以及为减少损失而支付的必要合理的施救、保护费用，赔付标准以保险公司核定为准且上限不超过10万/位。</div>
      </div>
      <div class="order-extra-item order-extra-maybe">
        <div class="order-extra-hd" data-id="2" data-price="50" data-total="${50 * days}" data-days="${days}" data-title="不计免赔"><i class="iconfont icon-circle"></i>不计免赔<span class="pull-right">￥50/天</span></div>
        <div class="order-extra-bd">如在租赁期间内购买不计免赔，则无需承担1500的绝对免赔额。且可免去前挡车窗玻璃破碎造成的需承租方承担的赔偿额。</div>
      </div>            
    </div>
    <div class="order-submit">
      <button type="button" class="btn pull-right order-submit-btn">提交订单</button>
      <div class="order-submit-main">
        <div class="order-submit-prepay">
          <a class="pull-right" href="javascript:void(0)">明细 <i class="iconfont icon-arrowdown"></i></a>
          预付费:<span class="prepay" data-initial="${total}" id="prepayTotal">￥${total}</span>
        </div>
      </div>
    </div>
    <div class="order-mask"></div>
    <div class="order-detail">
        <div class="order-detail-item">
            <label>车辆租赁费(工作日)</label>
            <span class="pull-right">￥<fmt:formatNumber type="number" value="${dayPrice}" pattern="0" maxFractionDigits="2"/>*${normalDays} = <fmt:formatNumber type="number" value="${dayTotalPrice}" pattern="0.00" maxFractionDigits="2"/></span>
        </div>
        <c:if test="${weekendDays > 0}">
        <div class="order-detail-item">
            <label>车辆租赁费(周末)</label>
            <span class="pull-right">￥<fmt:formatNumber type="number" value="${weekendDayPrice}" pattern="0" maxFractionDigits="2"/>*${weekendDays} = <fmt:formatNumber type="number" value="${weekendTotalPrice}" pattern="0.00" maxFractionDigits="2"/></span>
        </div>
        </c:if>
        <div class="order-detail-item">
            <label>长租折扣</label>
            <span class="pull-right">-￥<fmt:formatNumber type="number" value="${longTimeReduce}" pattern="0.00" maxFractionDigits="2"/></span>
        </div>
        <div class="order-detail-item">
            <label>会员折扣</label>
            <span class="pull-right">-￥<fmt:formatNumber type="number" value="${vipReduce}" pattern="0.00" maxFractionDigits="2"/></span>
        </div>
        <div class="order-detail-item">
            <label>基本保险</label>
            <span class="pull-right">+￥<fmt:formatNumber type="number" value="${insurance}" pattern="0" maxFractionDigits="2"/>*${days} = <fmt:formatNumber type="number" value="${totalInsurance}" pattern="0.00" maxFractionDigits="2"/></span>
        </div>
        <%--<div class="order-detail-maybe">--%>
            <%--<label>车上人员责任</label>--%>
            <%--<span class="pull-right">+￥50*${days} = ${50*days}</span>--%>
        <%--</div>--%>
        <%--<div class="order-detail-maybe">--%>
            <%--<label>不计免赔</label>--%>
            <%--<span class="pull-right">￥50*${days} = ${50*days}</span>--%>
        <%--</div>--%>
    </div>    
  </div>
  <div class="pop pop-close">
    <div class="pop-inner">
      <div class="pop-content">
          <div class="book-rule">
              <h3>一、普通车型退改规则</h3>
              <div class="ruleinfo">
                  <ul>
                      <li>
                          <p class="rule-lgbt">1、适用范围</p>
                          <ol style="color: #eb5c00;">
                              <li>a) 此规则仅限平日适用，春节、国庆等法定节假日请以具体公示的活动页为准；</li>
                              <li>b) 此规则仅限普通车型使用，高端车型请下拉查看具体规则。</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">2、订单取消</p>
                          <ol>
                              <li>a）若在取车前96小时前取消的，收取订单金额的15%作为违约金；</li>
                              <li>b）若在取车前72-96小时取消的，收取订单金额的30%作为违约金；</li>
                              <li>c）若在取车前48-72小时取消的，收取订单金额的50%作为违约金；</li>
                              <li>d）若在取车前24-48小时取消的，收取订单金额的70%作为违约金；</li>
                              <li>e）若在取车前24小时取消的，收取订单金额的90%作为违约金；</li>
                              <li>f）取车时间已到仍没有取车的，收取订单金额的100%作为违约金；</li>
                              <li>g）天气不可抗力（比如洪水、地震等自然灾害）导致取消订单的，不扣违约金；</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">3、订单改签</p>
                          <ol>
                              <li>a) 若在取车前72小时前修改，收取订订单金额的10%作为改签费；</li>
                              <li>b) 若在取车前48-72小时修改，收取订订单金额的20%作为改签费；</li>
                              <li>d) 若在取车前24-48小时修改，收取订单金额的30%作为改签费；</li>
                              <li>e) 若在取车前24小时内修改，收取订单金额的50%作为改签费；</li>
                              <li>f) 天气不可抗力（比如洪水、地震等自然灾害）导致修改合同的，不扣除违约金；</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">4、续租</p>
                          <p>取车后增加租期，视为续租，续租部分按照非预付优惠价计算。</p>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
      <div class="pop-ft">我知道了</div>
    </div>
  </div>
  <script src="${ctx}/resource/static/js/jquery.min.js"></script>
  <script src="${ctx}/resource/static/js/fastclick.js"></script>
  <script src="${ctx}/resource/static/js/user.js"></script>
    <script>
        $(function(){
            $('#fee-detail').click(function(){
                $('#feeForm').submit();
            });

            $('.order-submit-prepay').on('click', function(event){
                event.preventDefault();
                $(this).find('.iconfont').toggleClass('icon-arrowup icon-arrowdown')
                $('.order-detail').toggleClass('active')
                $('.order-mask').toggle()
            })

            $('.order-extra-maybe').on('click', function(){
                $(this).find('.iconfont').toggleClass('icon-circle icon-wancheng');
                updateOrderDetail()
            });

            $('#coupon').on('change', updateOrderDetail)

            //更新详情和总价
            function updateOrderDetail(){
                var total = Number($('#prepayTotal').data('initial')); //取预付费初始值
                $('.order-detail-maybe').remove();


                if($('#coupon').val() != '0'){
                    var $option = $('#coupon option:checked');
                    if($option.data('typename') == '折扣券'){
                        var zhikou = ((1 - $option.data('couponvalue'))  * total).toFixed(2) //保留2位
                        $('.order-detail').append('<div class="order-detail-maybe"><label>优惠券</label><span class="pull-right">-￥' + zhikou +'</span></div>')
                        total -= Number(zhikou) //
                    }else{
                        $('.order-detail').append('<div class="order-detail-maybe"><label>优惠券</label><span class="pull-right">-￥' + $option.data('couponvalue') +'</span></div>')
                        total -= Number($option.data('couponvalue')) //减优惠券的值
                    }
                }

                $('.order-extra-maybe .order-extra-hd .icon-wancheng').each(function(){
                    var $hd = $(this).parent()
                    $('.order-detail').append('<div class="order-detail-maybe"><label>'+$hd.data('title')+'</label><span class="pull-right">+￥'+$hd.data('price')+'*'+$hd.data('days')+' = '+$hd.data('total')+'</span></div>')
                    total += Number($hd.data('total')) //加可选增值服务

                    if ($hd.data('id')==1) {
                        $('#bx1').val(50);
                    } else if ($hd.data('id')==2) {
                        $('#bx2').val(50);
                    }
                })

                $('#prepayTotal').html('￥' + total.toFixed(2)) //保留两位小数

                $('#total2').val(total);
            }

        });
  </script>
</body>
</html>